import React, { useEffect } from 'react'
import { Banner, StreamLeaders, PopularAlbums, Episodes, News, Highlight, OurTeam, FindUs, Footer, NewArrivals } from './components'
import { makeStyles } from '@material-ui/core/styles';
import { callGetNewsApi } from 'utils/networking';
import { useSelector, useDispatch } from 'react-redux';
import { setDisCovers, setSteamVideo } from 'redux/actions/CoverActions';

const useStyles = makeStyles(theme => ({
    root: {
        height: '100%',
        width: '100%',
        overflow: 'hidden',
    },
    news: {
        display: "none",
        [theme.breakpoints.up('md')]: {
            display: "block",
        },
    },
    newsMobile: {
        display: "block",
        [theme.breakpoints.up('md')]: {
            display: "none",
        },
    },
}));

const Discover = () => {
    const classes = useStyles();
    const dispatch = useDispatch();
    const discoverData = useSelector((state) => state.cover.discovers);

    useEffect(() => {
        getServerSideProps();
        getServerVideoProps()
    }, [])

    const getServerSideProps = async () => {
        callGetNewsApi('cover/discovers', dispatch, (data) => {
            console.log(data, "discovers");
            dispatch(setDisCovers(data));
        });
    }

    const getServerVideoProps = async () => {
        callGetNewsApi('cover/steam_video', dispatch, (data) => {
            dispatch(setSteamVideo(data));
        });
    }


    return (
        <div className={classes.root}>
            <Banner />
            <StreamLeaders />
            <PopularAlbums />
            <Episodes />
            <div className={classes.news}>
                <News />
            </div>
            <Highlight />
            {/* <OurTeam /> */}
            <div className={classes.newsMobile}>
                <NewArrivals />
            </div>
            <div className={classes.newsMobile}>
                <News />
            </div>
            {/* <FindUs />
            <Footer /> */}
        </div>
    )
}

export default Discover